<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="getTitle" :width="700"
    @ok="handleSubmit">
    <a-form ref="formRef" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row>
        <a-col :span="24">
          <a-form-item label="样品编号" name="samNum">
            <a-input v-model:value="formData.samNum" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="样品名称" name="samName">
            <a-input v-model:value="formData.samName" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <!-- <a-col :span="24">
          <a-form-item label="样品外观" name="samAppear">
            <a-input v-model:value="formData.samAppear" :disabled="true"></a-input>
          </a-form-item>
        </a-col> -->
        <a-col :span="24">
          <a-form-item label="样品类型" name="sampleSort">
            <a-input v-model:value="formData.sampleSort" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="检测项目" name="testItems">
            <a-textarea v-model:value="formData.testItems" :disabled="true"></a-textarea>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="实验人员" name="testUsers">
            <a-input v-model:value="formData.testUsers" :disabled="true"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="领样日期" name="outDate">
            <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="formData.outDate" :disabled="false"
              style="width: 100%;" />
          </a-form-item>
          <a-form-item label="领样人" name="outPerson">
            <!-- <a-input v-model:value="formData.outPersonId" :disabled="false"></a-input> -->
            <a-select v-model:value="formData.outPerson" show-search style="width: 100%"
              :options="options"></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="领样说明" name="outRemark">
            <a-textarea v-model:value="formData.outRemark" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { sampleOut } from '../LabSample.api';
import type { SelectProps } from 'ant-design-vue';
import dayjs from 'dayjs';

// Emits声明
const emit = defineEmits(['register', 'success']);
const labelCol = reactive({
  xs: { span: 24 },
  sm: { span: 5 },
});
const wrapperCol = reactive({
  xs: { span: 24 },
  sm: { span: 16 },
});
const getTitle = ref('样品出库');
const options = ref<SelectProps['options']>([
  { value: '', label: '' }
]);
const formData = reactive({
  id: "",
  samNum: "",
  samName: "",
  model: "",
  lotNum: "",
  samDate: "",
  samAppear: "",
  backDate: "",
  backRemark: "",
  samStatus: "",
  stockCycle: "",
  outDate: "",
  outPersonId: "",
  outPerson: "",
  outRemark: "",
  sampleSort: "",
  testItems: "",
  testUsers: "",
});


function reset() {
  formData.id = '';
  formData.samNum = '';
  formData.samName = '';
  formData.model = '';
  formData.samDate = '';
  formData.lotNum = '';
  formData.backDate = "";
  formData.samDate = '';
  formData.backRemark = '';
  formData.samStatus = '';
  formData.stockCycle = '';
  formData.outDate = "";
  formData.outPersonId = '';
  formData.outPerson = '';
  formData.outRemark = '';
  formData.sampleSort = '';
  formData.testItems = '';
  formData.testUsers = '';
}

const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
  setModalProps({
    minHeight: 150
  });
  reset();
  Object.assign(formData, data.record);
  const currentDate = dayjs().format('YYYY-MM-DD');
  formData.outDate = currentDate;
  const users = formData.testUsers;
  if(users !=null){
    let arr = users.split(',');
    const newOptions = arr.map(item => ({ value: item, label: item }));
    options.value = newOptions;
  }else {
    options.value = [];
  }
});



//表单提交事件
async function handleSubmit() {
  try {
    //提交表单
    await sampleOut(formData);
    //关闭弹窗
    closeModal();
    //刷新列表
    emit('success');
  } finally {
    setModalProps({ confirmLoading: false });
  }
}
</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%
}

:deep(.ant-calendar-picker) {
  width: 100%
}
</style>